<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-10-25 15:39:05
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-11-08 14:10:18
 * @FilePath: \vue_video_manage\src\views\self\editPwd.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="info_box">
        <el-form ref="ruleFormRef" style="max-width: 600px" label-width="auto" class="demo-ruleForm" status-icon>
            <el-form-item label="用户名">
                <el-input v-model="ruleForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="旧密码">
                <el-input v-model="ruleForm.password" show-password placeholder="请输入旧密码" clearable />
            </el-form-item>
            <el-form-item label="新密码">
                <el-input v-model="ruleForm.newPassword" placeholder="请输入新密码" clearable />
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="ruleForm.reType" placeholder="请输入确认密码" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="reset">取消</el-button>
                <el-button @click="submitForm(ruleFormRef)">提交</el-button></el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref ,onMounted} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUser } from "@/stores/userInfo";
import { useRouter } from 'vue-router';

const router = useRouter()
const userStore = useUser();
const ruleForm = reactive({
    username: "",
    password: "",
    newPassword: "",
    reType: "",
});
const ruleFormRef = ref(null);
const submitForm = () => {
    if (!ruleForm.username | !ruleForm.password | !ruleForm.newPassword | !ruleForm.reType)
    {
        ElMessage.error("请填满输入框");
        return false;
    }
    if (ruleForm.password !== userStore.userInfo.password){
        ElMessage.error("旧密码输入错误")
        return false;
    }
    if (ruleForm.newPassword !== ruleForm.reType) {
        ElMessage.error("新密码输入不一致");
        return false;
    }
    ElMessageBox.confirm(
    '请确定修改密码?确定修改请点击确定。',
    '修改密码',
    {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            const data = { ...userStore.userInfo,
                password: ruleForm.newPassword }
            userStore.SET_USER_INFO(data)
            router.push('/');
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
        }
    )
};
onMounted(() => {
    const { username } = userStore.userInfo
    ruleForm.username = username
})
</script>

<style scoped>
.info_box {
    display: flex;
    justify-content: center;
}

.demo-ruleForm {
    width: 500px;
}
</style>
